<template>
    <div>
        <Filters block :form="searchForm" :filterData="filterData" @confirm="changePage(1)" />
         <div class="container">
             <DataTable rowKey="id" :showConfig="false" :btns="btns" :tableData="Data" :tableColumn="tableColumn" :pageConfig="pageConfig"></DataTable>
         </div>
         <CommonDialog
        :rows="rows"
        :form="form"
        :wrapperCol="wrapperCol"
        :labelCol="labelCol"
        :title="dialogType === 'add' ? '添加子分类' : '编辑子分类'"
        :visible="formVisible"
        @hideDialog="hideFormVisible"
        @confirm="confirmHandle()"
        />
    </div>
</template>
<script lang="ts">
import { Component, Watch, Vue } from 'vue-property-decorator'
@Component
export default class unitConfig extends Vue {
    wrapperCol:any = {span: 17}
    labelCol:any = {span: 7}
    unitList:any[] = [
        // {
        //     label:'自输入',
        //     value:''
        // },
        {
            label: '吨',
            value: '吨'
        },
        {
            label: '个',
            value: '个'
        },
        {
            label: '件',
            value: '件'
        },
        {
            label: '米',
            value: '米'
        },
        {
            label: '立方米',
            value: '立方米'
        },
        {
            label: '斤',
            value: '斤'
        },
        {
            label: '箱',
            value: '箱'
        },
        {
            label: '平方米',
            value: '平方米'
        }
    ]
    formVisible:boolean = false
    form: any = {
        settingCode: '',
        settingName: '',
        settingUnit: '',
        typeId: '',
        assetFlag: 'Y'
    };
    btns: any[] = [
        {
            label: '新增分类',
            callback: this.handleShowChild
        },
        {
            label: '物料批量管理',
            callback: this.tolink
        }
    ];
    dialogType:any = 'add'
    searchForm: any = {
        searchValue: ''
    };
    get filterData () {
        return {
            searchValue: {
                label: '关键词',
                type: 'input',
                template: {
                    placeholder: '搜索物料编码/名称',
                    clearable: true
                }
            }
        };
    }
    get rows () {
        return {
            settingCode: {
                label: '物料分类编码',
                placeholder: '',
                type: 'input',
                showDisabled: true
            },
            settingName: {
                label: '物料分类名称',
                placeholder: '',
                type: 'input',
                rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
            },
            settingUnit: {
                label: '物料分类计量单位',
                placeholder: '',
                el: 'input',
                // options:this.unitList,
                // callback:this.handleChageUnit,
                rules: [{ required: true, message: '不能为空', trigger: 'blur' }]
            }
        }
    }
    Data: any[] = []
    tableColumn: any = {
        code: {
            label: '物料分类编码',
            width: 120
        },
        name: {
            label: '物料分类名称',
            width: 150
        },
        materialNum: {
            label: '可周转物料种类个数',
            width: 150
        },
        settingUnit: {
            label: '计量单位',
            width: 150
        },
        assetFlag: {
            label: '是否统计数据',
            width: 150,
            type: 'switch2',
            callback: this.changeSwitch
        },
        action: {
            label: '操作',
            width: 300,
            template: [
                {
                    tag: 'a',
                    text: '编辑',
                    callback: this.handleShowChild2
                }, {
                    tag: 'router-link',
                    text: '物料管理',
                    query: {
                        id: ''
                    },
                    path: '/allot/classifyConfig/unitCoeff'
                }, {
                    tag: 'a',
                    text: '删除',
                    callback: this.handleCancel
                }
            ]
        }
    }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 10,
        onChange: this.changePage
    };
    changeSwitch (val:any, index:any) {
        console.log(val)
        let obj = Object.assign({}, val)
        if (obj.assetFlag) {
            obj.assetFlag = 'Y'
        } else {
            obj.assetFlag = 'N'
        }
        let data = {
            typeId: val.id,
            level: 2,
            assetFlag: obj.assetFlag
        }
        this.$api.assetSettingTurnTypeAssetFlagFetch(data).then(res => {
            if (res.code == 0) {
                this.$message.success('操作成功');
                this.getList()
            }
        }).catch()
    }
    tolink () {
        this.$router.push({path: '/allot/classifyConfig/materialA'})
    }
    // 提交
    confirmHandle () {
        if (this.dialogType == 'add') {
            this.$api.assetSettingAddMaterialTypeSettingFetch(this.form).then(res => {
                if (res.code == 0) {
                    this.$message.success('操作成功');
                    this.getList()
                    this.hideFormVisible()
                }
            }).catch()
        } else {
            this.$api.assetSettingUpdateMaterialTypeSettingFetch(this.form).then(res => {
                if (res.code == 0) {
                    this.$message.success('操作成功');
                    this.getList()
                    this.hideFormVisible()
                }
            }).catch()
        }
    }
    init () {
        this.getList()
    }
    // 获取列表
    getList () {
        let data = {
            page: this.pageConfig.current,
            size: this.pageConfig.pageSize,
            searchValue: this.searchForm.searchValue
        }
        this.$api.assetSettingMaterialTypeSettingListFetch(data).then(res => {
            res.data.records.map((item:any) => {
                item.isFalg = false
                if (item.assetFlag == 'Y') {
                    item.assetFlag = true
                } else {
                    item.assetFlag = false
                }
            })
            this.Data = res.data.records
            this.pageConfig.total = res.data.total
        }).catch()
    }
    // 删除子分类
    handleCancel (val:any) {
        let that = this
        this.$confirm({
        title: '是否确定删除',
        onOk () {
            that.$api.assetSettingDeleteTypeFetch({typeId: val.id}).then(res => {
                if (res.code == 0) {
                    that.$message.success('操作成功');
                    that.getList()
                }
            }).catch()
        }
      });
    }
    // 显示添加分类
    handleShowChild (val:any) {
        this.formVisible = true
        this.dialogType = 'add'
        this.form.settingCode = 'F' + this.randomSix()
        this.form.typeId = 0
    }
    // 随机6位数
    randomSix () {
        let num = ''
        for (let i = 0; i < 6; i++) {
            num += Math.floor(Math.random() * 10)
        }
        return num
    }
    handleShowChild2 (val:any) {
        console.log(val, '==')
        this.dialogType = 'ed'
        this.form.settingCode = val.code
        this.form.typeId = val.typeId
        this.form.settingId = val.id
        this.form.settingName = val.name
        this.form.settingUnit = val.settingUnit
        this.formVisible = true
        if (val.assetFlag) {
            this.form.assetFlag = 'Y'
        } else {
            this.form.assetFlag = 'N'
        }
    }
    // 隐藏分类弹窗
    hideFormVisible () {
        this.form.code = ''
        this.form.typeId = ''
        this.form.settingName = ''
        this.form.settingUnit = ''
        this.form.settingId = ''
        this.formVisible = false
        this.form.assetFlag = ''
    }
    changePage (val: number) {
        this.pageConfig.current = val;
        this.getList()
    }
}
</script>
<style lang="scss" scoped></style>
